<!DOCTYPE html>
<html class="no-js multiview">
<head>
    <title>房间浏览</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div data-role="page" id="housePage">
    <style>
        img {
            width: 160px;
            height: 160px;
        }
    </style>
    <script type="text/javascript">
        var loaded = false;//防止执行重复
        $(document).on("pageshow","#housePage",function(){ // 当进入页面二时
            if (!loaded) {
                initData();
                loaded = true;
            }
        });

        /**
         * 初始化房间数据
         * */
        function initData(){
            Custom.request(this,"house/searchList",
                    function (data, textStatus) {
                        console.info(data);
                        var tbody = "";
                        if (data != null && data.length != 0) {
                            $.each(data,function(n,value) {
                                var lis = "";
                                lis += "<li><a href='#'><img src="+ value.url +"/>"+

                                        "<h2>"+ value.hno +"</h2>"+

                                         "<p>"+ value.desc+"</p>" +
                                        "<span class='ui-li-count'>"+value.price+"$</span></a></li>";
                                tbody += lis;
                            });

                            $("#houseOl").append(tbody);
                            $("#houseOl").listview("refresh");
                            bindLiEvent(data);
                        }
                    });
        }

        /**
         * 给Li绑定事件
         */
        function bindLiEvent(obj){
            var parentTemp = this;
            $.each($("ol li"), function (i, val) {
                $(val).click(function () {
                    var house = obj[i];
                    var houseState = house.state == "0" ? "可预订":"已入住";
                    var houseType = "普通房";
                    if(house.htype == "2"){
                        houseType = "标准房";
                    }else if(house.htype == "3"){
                        houseType = "商务房";
                    }
                    $(val).simpledialog2({
                        mode: 'blank',
                        headerText: house.hno,
                        headerClose: true,
                        blankContent :
                                         "<div style='text-align: center;'></di><img src="+ house.url +"/>"+
                                          "<br/>房间状态："+ houseState +"<br/>"+
                                          "房间类型："+houseType+"</div>"+
                                    // NOTE: the use of rel="close" causes this button to close the dialog.
                                        "<a rel='close' data-role='button' href='#'>关闭</a>"
                    });
                });
            });
        }

    </script>
    <div data-role="header" data-position="fixed">
        <h2>房间浏览</h2>
    </div>
    <!-- /header -->

    <div data-role="content">
        <ol  id="houseOl" data-role="listview" data-inset="true">
        </ol>
    </div>
    <!-- /content -->
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="home">房间浏览</a></li>
                <li><a onclick="changeRoomOrderPage()" data-iconpos="top" data-multiview="true" data-icon="eye">预订房间</a></li>
                <li><a onclick="changeBroweOrderPage()" data-iconpos="top" data-multiview="true" data-icon="search">订单浏览</a></li>
                <li><a onclick="changeMorePage()" data-iconpos="top" data-icon="tag">更多</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- /page -->
</body>
</html>